<template>
  <Modal
    v-model="visible"
    :title="
      currentTank === undefined
        ? '槽体参数设置'
        : `${currentTank.name}${currentTank.id}号槽体参数设置`
    "
    width="600"
    @on-ok="handleOk"
    @on-cancel="handleCancel"
  >
    <Form
      :model="formData"
      :label-width="120"
      class="form"
      label-position="left"
    >
      <FormItem label="工件编号:">
        <InputNumber
          v-model="formData.workpieceNum.value"
          :min="0"
          :max="32000"
          @on-blur="handleBlur('workpieceNum')"
        />
      </FormItem>
      <FormItem label="挂组ID:">
        <InputNumber
          v-model="formData.hangGroupID.value"
          :min="0"
          :max="2147483600"
          @on-blur="handleBlur('hangGroupID')"
        />
      </FormItem>
      <FormItem label="设定时间:">
        <InputNumber
          v-model="formData.setTime.value"
          :min="0"
          :max="32000"
          @on-blur="handleBlur('setTime')"
        />
      </FormItem>
      <FormItem label="工作计时:">
        <InputNumber
          v-model="formData.workTime.value"
          :min="0"
          :max="32000"
          @on-blur="handleBlur('workTime')"
        />
      </FormItem>

      <template v-if="formData.temperature">
        <FormItem label="温度:">
          <span>{{ formData.temperature.value }}</span>
        </FormItem>
      </template>

      <template v-if="formData.conductivity">
        <FormItem label="电导率:">
          <span>{{ formData.conductivity.value }}</span>
        </FormItem>
      </template>

      <template v-if="formData.liquidLevel">
        <FormItem label="液位:">
          <span>{{ formData.liquidLevel.value }}</span>
        </FormItem>
      </template>
      <template v-if="formData.ph">
        <FormItem label="ph:">
          <span>{{ formData.ph.value }}</span>
        </FormItem>
      </template>

      <template v-if="formData.current">
        <FormItem label="电流:">
          <span>{{ formData.current.value }}</span>
        </FormItem>
      </template>

      <template v-if="formData.voltage">
        <FormItem label="电压:">
          <span>{{ formData.voltage.value }}</span>
        </FormItem>
      </template>

      <FormItem label="接液开关:">
        <i-switch
          v-model="formData.liquidConSwitch.value"
          @on-change="handleSwitchChange('liquidConSwitch')"
          :true-value="true"
          :false-value="false"
        >
          <span slot="open">开</span>
          <span slot="close">关</span>
        </i-switch>
      </FormItem>

      <FormItem label="倒水开关:">
        <i-switch
          v-model="formData.dischargeSwitch.value"
          @on-change="handleSwitchChange('dischargeSwitch')"
          :true-value="true"
          :false-value="false"
        >
          <span slot="open">开</span>
          <span slot="close">关</span>
        </i-switch>
      </FormItem>

      <template v-if="formData.doorSwitch">
        <FormItem label="门盖开关:">
          <i-switch
            v-model="formData.doorSwitch.value"
            @on-change="handleSwitchChange('doorSwitch')"
            :true-value="true"
            :false-value="false"
          >
            <span slot="open">开</span>
            <span slot="close">关</span>
          </i-switch>
        </FormItem>
      </template>
    </Form>
  </Modal>
</template>

<script lang="ts">
import { Tsrv, T_srv, vue, N_cStph, lineMainConfig } from './config';

@T_srv.comp
export default class SlotParaSetModal extends vue {
  private currentTank: N_cStph.TankConfig = lineMainConfig().tanks[0];

  private visible = false;

  private formData: N_cStph.TankParams = this.currentTank.params;

  private originalData: N_cStph.TankParams = this.currentTank.params;

  show(tank: N_cStph.TankConfig) {
    this.currentTank = tank;
    this.visible = true;
    this.formData = JSON.parse(JSON.stringify(tank.params));
    this.originalData = JSON.parse(JSON.stringify(tank.params));
  }

  hide() {
    this.visible = false;
  }

  handleOk() {
    this.checkAndSaveChanges();
    this.hide();
  }

  handleCancel() {
    this.hide();
  }

  handleBlur(field: string) {
    if (this.formData[field].value !== this.originalData[field].value) {
      this.saveParam(field);
    }
  }

  handleSwitchChange(field: string) {
    this.saveParam(field);
  }

  private checkAndSaveChanges() {
    Object.keys(this.formData).forEach(key => {
      if (this.formData[key].value !== this.originalData[key].value) {
        this.saveParam(key);
      }
    });
  }

  private saveParam(field: string) {
    const param = this.formData[field];
    // 这里调用API保存参数
    const data = [{ ecDetCode: param.code, value: param.value.toString() }];
    Tsrv.writePlcData(data).then(_ => {
      Tsrv.readPlcData([param.code]).then(res => {
        if (typeof res === 'boolean') return;
        this.formData[field].value = res[param.code].v;
      });
    });
    this.$emit('on-save', {
      field,
      value: param.value,
      tankID: this.currentTank.id
    });

    // 更新原始数据
    this.originalData[field].value = param.value;
  }
}
</script>

<style lang="scss" scoped>
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
::v-deep .ivu-form-item {
  padding-left: 20px;
  margin-bottom: 16px;
}
::v-deep .ivu-modal-footer .ivu-modal-header {
  background: #dcd4da;
  border-radius: 5px;
}
</style>
